﻿{extend name="public:base" /}{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <a href="{:url('doContact')}" class="btn btn-primary btn-lg">新增</a>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="iconfont icon-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    {if $user_type == 0 || $user_type == 2 || $user_type == 3}
                    <div class="row search-form">
                        {if $user_type == 0}
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="up_company_user_id" id="companySelect">
                                <option value="0">请选择分公司/运营中心</option>
                                {volist name="company_list" id="vo"}
                                <option value="{$vo.id}" {:input('up_company_user_id') == $vo.id ? 'selected' : ''}>{$vo.username}</option>
                                {/volist}
                            </select>
                        </div>

                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="up_channel_user_id" id="channelSelect">
                                <option value="0">请选择渠道/团队长</option>
                            </select>
                        </div>

                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="shop_id" id="shopSelect">
                                <option value="0">请选择门店</option>
                            </select>
                        </div>
                        {/if}

                        {if $user_type == 2}
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="up_channel_user_id" id="channelSelect2">
                                <option value="0">请选择渠道/团队长</option>
                                {volist name="channel_list" id="vo"}
                                <option value="{$vo.id}" {$vo.id == input('up_channel_user_id') ? 'selected' : ''}>{$vo.username}</option>
                                {/volist}
                            </select>
                        </div>

                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="shop_id" id="shopSelect2">
                                <option value="0">请选择门店</option>
                            </select>
                        </div>
                        {/if}

                        {if $user_type == 3}
                        <div class="col-sm-2 m-b-sm">
                            <select class="form-control" name="shop_id" id="shopSelect3">
                                <option value="0">请选择门店</option>
                                {volist name="shop_list" id="vo"}
                                <option value="{$vo.id}" {$vo.id == input('shop_id') ? 'selected' : ''}>{$vo.username}</option>
                                {/volist}
                            </select>
                        </div>
                        {/if}

                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group" style="width: 100%; display: flex; justify-content: space-between">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                            </div>
                        </div>
                    </div>
                    {/if}

                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>账号</th>
                                <th>管理分公司/运营中心</th>
                                <th>管理渠道/团队长</th>
                                <th>管理门店</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr>
                                <td width="5%">{$vo.id}</td>
                                <td width="7%">{$vo.username}</td>
                                <td width="7%">{$vo.account}</td>
                                <td width="20%">{$vo.company_ids|doCompany}</td>
                                <td width="20%" class="limit-td">
                                    <div class="text-box">
                                        {$vo.channel_ids|doChannel}
                                    </div>
                                    <span class="toggle-btn">查看更多</span>
                                </td>
                                <td width="20%" class="limit-td">
                                    <div class="text-box">
                                        {$vo.shop_ids|doShop}
                                    </div>
                                    <span class="toggle-btn">查看更多</span>
                                </td>
                                <td class="project-actions" width="21%">
                                    <a href="{:url(initPwd, ['id' => $vo.id])}" data-msg="您确认重置密码为123456吗？" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-zhongxinhuida"></i> 重置密码 </a>
                                    <div class="btn btn-white btn-sm" data-toggle="modal" data-target="#choose" onclick="setId(`{$vo.id}`)">
                                        <i class="iconfont icon-xinzeng"></i> 分配客户
                                    </div>
                                    {if $vo.status == 1}
                                    <a href="{:url(doContactStatus, ['id' => $vo.id, 'status' => 2])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-success"></i> 禁用 </a>
                                    {else /}
                                    <a href="{:url(doContactStatus, ['id' => $vo.id, 'status' => 1])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-success"></i> 启用 </a>
                                    {/if}
                                    <a href="{:url(doContact, ['id' => $vo.id])}" class="btn btn-white btn-sm"><i class="iconfont icon-edit"></i> 编辑 </a>
                                    <a href="{:url(delContact, ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-operate"><i class="iconfont icon-trash"></i> 删除 </a>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        {if !empty($list)}{$list->render()}{/if}
                    </div>

                </div>
            </div>
        </div>
    </div>

    <style>
        .main {
            display: flex;
            flex-direction: column;
        }

        .module-box {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            overflow-y: scroll;
            max-height: 250px;
        }

        .module {
            margin-top: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .checkbox-input {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e7eaec;
        }

        .checkbox-input input {
            margin: 13px;
            float: left;
        }

        .checkbox-name {
            text-align: left;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e7eaec;
            border-left: 0;
            padding: 0 13px;
            margin-right: 10px;
        }

        .limit-td .text-box {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4; /* 显示 4 行 */
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all 0.25s;
            word-break: break-all;
        }

        .limit-td .text-box.expanded {
            display: block; /* 展开恢复全部内容 */
        }

        .limit-td .toggle-btn {
            display: inline-block;
            color: #409eff;
            cursor: pointer;
            margin-top: 6px;
            font-size: 14px;
        }
    </style>
    <div class="modal inmodal" id="choose" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="max-width: 700px;">
            <div class="modal-content animated flipInY">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">分配客户</h4>
                </div>
                <div class="modal-body">
                    <div class="main">
                        <!-- 搜索框 -->
                        <div class="search-box mb-3">
                            <div class="input-group">
                                <input type="text" id="user_search" class="form-control" placeholder="搜索客户名称">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button" id="search_btn" style="margin-left: 10px">搜索</button>
                                </span>
                            </div>
                        </div>
                        <!-- 搜索结果统计 -->
                        <div class="search-result-count mb-2" style="color: #999;">
                            共 <span id="total_count">0</span> 位用户
                        </div>

                        <div class="module">
                            <div class="checkbox-input">
                                <input class="all_check" type="checkbox" value="0">
                            </div>
                            <span class="checkbox-name">全选</span>
                        </div>
                        <div class="module-box">
                            <!-- 客户数据将通过JavaScript动态加载 -->
                            <div style="text-align: center; padding: 20px; color: #999;">请选择客服后加载客户数据</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="confirmSpread()">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/preview-img-mask" swiper-id="cropper-preview" /}
{/block}

{block name="js"}
<script src="/static/laydate/laydate.js"></script>
<script>
    document.querySelectorAll('.limit-td').forEach(td => {
        const textBox = td.querySelector('.text-box');
        const btn = td.querySelector('.toggle-btn');

        // 判断是否超过4行
        const lh = parseFloat(getComputedStyle(textBox).lineHeight);
        const maxHeight = lh * 4;

        if (textBox.scrollHeight <= maxHeight) {
            btn.style.display = 'none';
        }

        btn.addEventListener('click', () => {
            if (textBox.classList.contains('expanded')) {
                textBox.classList.remove('expanded');
                btn.innerText = '查看更多';
            } else {
                textBox.classList.add('expanded');
                btn.innerText = '收起';
            }
        });
    });

    laydate.render({
        elem: '.screen-date', //指定元素
        format: 'yyyy-MM-dd',
        range: true
    });

    $(function() {
        // 公司渠道数据
        var company_list_json = `{$company_list_json}` ? JSON.parse(`{$company_list_json}`) : [];
        var channel_list_json = `{$channel_list_json}` ? JSON.parse(`{$channel_list_json}`) : [];

        // 根据用户类型初始化不同的联动逻辑
        var user_type = {$user_type};

        // 初始化时，如果有选中的公司，加载对应的渠道
        if (user_type == 0) {
            var initialCompanyId = $('#companySelect').val();
            if (initialCompanyId && initialCompanyId > 0) {
                loadChannels(initialCompanyId);
            }

            // 监听公司选择变化
            $('#companySelect').change(function() {
                var companyId = $(this).val();
                loadChannels(companyId);
                // 清空门店选择
                $('#shopSelect').empty().append('<option value="0">请选择门店</option>');
            });

            // 监听渠道选择变化
            $('#channelSelect').change(function() {
                var channelId = $(this).val();
                loadShops(channelId);
            });
        } else if (user_type == 2) {
            var initialChannelId = $('#channelSelect2').val();
            if (initialChannelId && initialChannelId > 0) {
                loadShopsForChannel(initialChannelId);
            }

            // 监听渠道选择变化
            $('#channelSelect2').change(function() {
                var channelId = $(this).val();
                loadShopsForChannel(channelId);
            });
        }

        // 根据公司ID加载渠道数据（user_type == 0）
        function loadChannels(companyId) {
            var channelSelect = $('#channelSelect');

            // 清空渠道下拉框
            channelSelect.empty().append('<option value="0">请选择渠道/团队长</option>');

            // 如果选择了有效的公司ID
            if (companyId > 0) {
                // 查找对应的公司
                var company = company_list_json.find(function(item) {
                    return item.id == companyId;
                });

                // 如果找到公司且有渠道列表
                if (company && company.channel_list && company.channel_list.length > 0) {
                    // 添加渠道选项
                    var up_channel_user_id = `{:input('up_channel_user_id')}`
                    company.channel_list.forEach(function(channel) {
                        var selected = up_channel_user_id == channel.id ? 'selected' : '';
                        var option = $('<option '+ selected +'></option>')
                            .val(channel.id)
                            .text(channel.username);

                        channelSelect.append(option);
                    });

                    // 如果有选中的渠道，加载对应的门店
                    if (up_channel_user_id > 0) {
                        loadShops(up_channel_user_id);
                    }
                }
            }
        }

        // 根据渠道ID加载门店数据（user_type == 0）
        function loadShops(channelId) {
            var shopSelect = $('#shopSelect');

            // 清空门店下拉框
            shopSelect.empty().append('<option value="0">请选择门店</option>');

            // 如果选择了有效的渠道ID
            if (channelId > 0) {
                // 查找对应的渠道
                var channel = null;
                for (var i = 0; i < company_list_json.length; i++) {
                    var company = company_list_json[i];
                    if (company.channel_list) {
                        channel = company.channel_list.find(function(item) {
                            return item.id == channelId;
                        });
                        if (channel) break;
                    }
                }

                // 如果找到渠道且有门店列表
                if (channel && channel.shop_list && channel.shop_list.length > 0) {
                    // 添加门店选项
                    var shop_id = `{:input('shop_id')}`
                    channel.shop_list.forEach(function(shop) {
                        var selected = shop_id == shop.id ? 'selected' : '';
                        var option = $('<option '+ selected +'></option>')
                            .val(shop.id)
                            .text(shop.username);

                        shopSelect.append(option);
                    });
                }
            }
        }

        // 根据渠道ID加载门店数据（user_type == 2）
        function loadShopsForChannel(channelId) {
            var shopSelect = $('#shopSelect2');

            // 清空门店下拉框
            shopSelect.empty().append('<option value="0">请选择门店</option>');

            // 如果选择了有效的渠道ID
            if (channelId > 0) {
                // 查找对应的渠道
                var channel = channel_list_json.find(function(item) {
                    return item.id == channelId;
                });

                // 如果找到渠道且有门店列表
                if (channel && channel.shop_list && channel.shop_list.length > 0) {
                    // 添加门店选项
                    var shop_id = `{:input('shop_id')}`
                    channel.shop_list.forEach(function(shop) {
                        var selected = shop_id == shop.id ? 'selected' : '';
                        var option = $('<option '+ selected +'></option>')
                            .val(shop.id)
                            .text(shop.username);

                        shopSelect.append(option);
                    });
                }
            }
        }


        // 搜索功能
        function searchUsers() {
            var searchText = $('#user_search').val().toLowerCase();
            var visibleCount = 0;
            var totalCount = 0;

            $('#choose .module[data-username]').each(function () {
                var username = $(this).data('username').toLowerCase();
                totalCount++;

                if (searchText === '' || username.indexOf(searchText) !== -1) {
                    $(this).show();
                    visibleCount++;
                } else {
                    $(this).hide();
                    // 保留选中状态，只隐藏不符合条件的用户
                    // 注释掉这行，避免取消选中状态
                    // $(this).find('.single_check').prop('checked', false);
                }
            });

            // 更新搜索结果统计
            $('#total_count').text(visibleCount);

            // 更新全选框状态
            updateAllCheckStatus();
        }

        // 搜索按钮点击事件
        $('#search_btn').on('click', function(e) {
            // 阻止事件冒泡和默认行为，确保不会触发确认推广按钮的逻辑
            e.preventDefault();
            e.stopPropagation();
            searchUsers();
        });

        // 搜索框回车事件
        $('#user_search').on('keyup', function (e) {
            if (e.key === 'Enter') {
                // 阻止事件冒泡和默认行为
                e.preventDefault();
                e.stopPropagation();
                searchUsers();
            }
        });

        // 全选框点击事件
        $('#choose .all_check').on('click', function () {
            var isChecked = $(this).prop('checked');
            // 设置所有可见的单选框的状态与全选框一致
            $('#choose .module[data-username]:visible .single_check').prop('checked', isChecked);
        });

        // 单选框点击事件
        $('#choose .single_check').on('click', function () {
            updateAllCheckStatus();
        });

        // 初始化时检查全选状态
        updateAllCheckStatus();

        // 确认推广按钮点击事件
        $('#choose .btn-primary').on('click', function () {
            // 获取所有选中的用户ID
            var selectedIds = [];
            $('#choose .single_check:checked').each(function () {
                selectedIds.push($(this).val());
            });

            // 如果没有选择用户，可以给个提示
            /*if (selectedIds.length === 0) {
                layer.msg('请至少选择一个用户');
                return;
            }*/

            // 这里可以添加推广逻辑，比如将选中的用户ID传递给后端
            // 实际的confirmSpread函数应该会处理这个逻辑
        });

        // 当模态框显示时，重新检查全选状态
        $('#choose').on('shown.bs.modal', function () {
            updateAllCheckStatus();
            // 清空搜索框
            $('#user_search').val('');
            // 显示所有用户
            $('#choose .module[data-username]').show();
            // 更新统计
            $('#total_count').text($('#choose .module[data-username]').length);
        });

        // 点击module直接操作对应的checkbox
        $('#choose .module').on('click', function (e) {
            // 如果点击的是checkbox本身，则不处理，避免重复触发
            if ($(e.target).is('input[type="checkbox"]')) {
                return;
            }

            // 找到当前module中的checkbox
            var checkbox = $(this).find('input[type="checkbox"]');

            // 切换checkbox的选中状态
            checkbox.prop('checked', !checkbox.prop('checked'));

            // 如果是点击的单选框，更新全选框状态
            if (checkbox.hasClass('single_check')) {
                updateAllCheckStatus();
            } else if (checkbox.hasClass('all_check')) {
                // 如果是点击的全选框，同步所有可见的单选框状态
                var isChecked = checkbox.prop('checked');
                $('#choose .module[data-username]:visible .single_check').prop('checked', isChecked);
            }
        });

        // 为checkbox添加阻止冒泡的事件，防止点击checkbox时触发外层module的点击事件
        $('#choose .module input[type="checkbox"]').on('click', function (e) {
            e.stopPropagation();
        });
    });


    /**
     * 更新全选框的状态
     */
    function updateAllCheckStatus() {
        var totalVisibleChecks = $('#choose .module[data-username]:visible .single_check').length;
        var checkedVisibleChecks = $('#choose .module[data-username]:visible .single_check:checked').length;

        // 如果所有可见的单选框都被选中，则选中全选框；否则取消选中
        $('#choose .all_check').prop('checked', totalVisibleChecks > 0 && totalVisibleChecks === checkedVisibleChecks);
    }

    var id = 0;

    function setId(choose_id) {
        id = choose_id;
        // 加载客户数据
        loadUserData(choose_id);
    }

    function loadUserData(customerServiceId) {
        // 清空现有用户列表
        $('.module-box').html('');
        $('#total_count').text('0');
        
        // 显示加载状态
        $('.module-box').html('<div style="text-align: center; padding: 20px; color: #999;">正在加载客户数据...</div>');
        
        // 请求接口获取客户数据
        $.post("/index/index/getUserList", {user_id: customerServiceId}, function(res) {
            // 清空加载状态
            $('.module-box').html('');
            
            if (res.result == 1 && res.data && res.data.length > 0) {
                // 填充客户数据
                var userData = res.data;
                $('#total_count').text(userData.length);
                
                userData.forEach(function(user) {
                    // 检查contact_id是否大于0，是的话设置checked属性
                    var checkedAttr = user.contact_id && user.contact_id > 0 ? 'checked="checked"' : '';
                    
                    var module = $('<div class="module" data-username="' + user.username + '">');
                    module.append('<div class="checkbox-input"><input name="ids[]" class="single_check" type="checkbox" value="' + user.id + '" ' + checkedAttr + '></div>');
                    module.append('<span class="checkbox-name">' + user.username + '</span>');
                    $('.module-box').append(module);
                });
                
                // 重新绑定事件
                bindModuleEvents();
            } else {
                // 没有数据时显示提示
                $('.module-box').html('<div style="text-align: center; padding: 20px; color: #999;">暂无客户数据</div>');
            }
            
            // 更新全选框状态
            updateAllCheckStatus();
        }, 'json').fail(function() {
            // 请求失败时显示提示
            $('.module-box').html('<div style="text-align: center; padding: 20px; color: #999;">加载客户数据失败，请稍后重试</div>');
        });
    }
    
    function bindModuleEvents() {
        // 为新加载的module元素绑定点击事件
        $('#choose .module[data-username]').on('click', function (e) {
            // 如果点击的是checkbox本身，则不处理，避免重复触发
            if ($(e.target).is('input[type="checkbox"]')) {
                return;
            }

            // 找到当前module中的checkbox
            var checkbox = $(this).find('input[type="checkbox"]');

            // 切换checkbox的选中状态
            checkbox.prop('checked', !checkbox.prop('checked'));

            // 如果是点击的单选框，更新全选框状态
            if (checkbox.hasClass('single_check')) {
                updateAllCheckStatus();
            }
        });
        
        // 为新加载的checkbox绑定阻止冒泡事件
        $('#choose .module[data-username] input[type="checkbox"]').on('click', function (e) {
            e.stopPropagation();
        });
        
        // 为单选框绑定状态更新事件
        $('#choose .single_check').on('click', function () {
            updateAllCheckStatus();
        });
    }

    function confirmSpread() {
        // 获取所有选中的用户ID
        var selectedIds = [];
        $('#choose .single_check:checked').each(function () {
            selectedIds.push($(this).val());
        })
        if (selectedIds.length === 0) {
            layer.msg('请选择用户');
        }

        $.post("{:url('/admin/manage/allocateUserToContact')}", {id, user_ids: selectedIds}, function (res) {
            if (res.result == 1) {
                layer.msg(res.msg);
                setTimeout(function () {
                    window.location.reload();
                }, res.timer)
            } else {
                layer.msg(res.msg)
            }
        }, 'json')
    }


</script>{/block}

